<template>
    <div>
        <MyNavBar></MyNavBar>
        <!--文章基本信息部分(标题/版块/类型/标签/摘要)开始-->
        <div class="post-article-container">
            <el-row :gutter="20">
                <el-col :span="20" :offset="2"
                        style="border:0px solid #aaa;border-radius: 10px;padding:20px 20px;display: inline-block;">

                    <el-form ref="form" :model="article" label-width="80px">
                        <el-form-item label="文章标题">
                            <el-input v-model="article.title"></el-input>
                        </el-form-item>
                    </el-form>

                    <el-form :inline="true" :model="article" label-width="80px">

                        <el-form-item label="文章版块">
                            <el-select v-model="article.catalog" placeholder="请选版块">
                                <template v-for="(c,index) in catalogList">
                                    <el-option v-if="c.cname !='全部'" :label="c.cname" :value="c.id"
                                               :key="index"></el-option>
                                </template>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="文章类别">
                            <el-select v-model="article.type" placeholder="请选类别">
                                <el-option :label="q" :value="q" v-for="(q,index) in questionTypeList"
                                           :key="index"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="上传文件">
                            <div>
                                <el-upload
                                        :action="uploadActionUrl"
                                        :on-success="uploadSuccess"
                                        show-file-list="show-file-list"
                                        auto-upload="auto-upload"
                                >
                                    <el-button size="small" type="primary">点击上传</el-button>
                                </el-upload>
                                <div>{{uploadSuccessFulUrl}}</div>
                            </div>
                        </el-form-item>

                        <el-form-item label="文章标签">
                            <el-checkbox-group v-model="articleTags">
                                <el-checkbox :label="tag" :name="tag" :key="index"
                                             v-for="(tag,index) in articleTagsList"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-form>
                    <el-form>
                        <el-form-item label="文章摘要">
                            <el-input
                                    type="textarea"
                                    :rows="2"
                                    maxlength="200"
                                    show-word-limit
                                    placeholder="请输入内容(不超过200个字符)"
                                    v-model="article.summary"
                            >
                            </el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
        <!--文章基本信息部分(标题/版块/类型/标签/摘要)结束-->
        <!--mavonEditor部分开始-->
        <div id="main">
            <mavon-editor v-model="article.mdcontent" @change="change"/>
        </div>
        <!--mavonEditor部分结束-->

        <br>
        <!--确认按钮start-->
        <el-form>
            <el-form-item style="text-align: center">
                <el-button type="primary" round @click="postArticle">确认更新</el-button>
            </el-form-item>
        </el-form>
        <!--确认按钮end-->

        <MyFooter></MyFooter>
    </div>
</template>

<script>
    import MyNavBar from "@/components/pc/MyNavBar";

    import MyFooter from "@/components/pc/MyFooter";
    import "@/plugins/vue-mavon-editor"
    import request from "@/util/request";

    export default {
        name: "MyEditArticle",
        components: {
            MyNavBar,
            MyFooter
        },
        data() {
            return {
                currentArticleId: this.$route.params.aid,
                questionTypeList: ['教程', 'BUG', '公告'],
                catalogList: [
                    {
                        "version": 0,
                        "createTime": "2020-11-25 19:24:38",
                        "modifyTime": "2020-11-25 19:24:38",
                        "flag": true,
                        "cid": 1,
                        "id": "all",
                        "cname": "全部",
                        "pid": "top"
                    }
                ],
                fileList: [],
                uploadSuccessFulUrl: '',
                uploadActionUrl: 'http://47.94.208.6:8090/examdemo/commons/qiniu/upload',
                articleTags: [],
                articleTagsList: ['c/c++', 'java', 'javaee框架', 'h5', 'vue', 'app', '算法', 'linux', '大数据', 'python'],
                article: {
                    aid: -1,  //如果aid存在做更新操作。
                    uid: this.$store.state.currentLoginUserInfo.uid, //发表文章的用户id暂时写死，以后通过程序判断
                    title: '',
                    username: this.$store.state.currentLoginUserInfo.username,
                    tags: '',
                    type: '',
                    catalog: '',
                    catalogName: '',
                    summary:'',
                    content: '',
                    mdcontent: ''
                }
            }
        },
        mounted() {
            console.log("要更新的文章ID："+this.currentArticleId);

            if (this.$store.state.catalogListData) {
                console.log('版块列表已经初始化....');
                //console.log(this.$store.state.catalogListData);
                this.catalogList = this.$store.state.catalogListData;
            } else {
                console.log('版块列表未始化....');
                this.initCatalogList();
            }
            //初始化当前的文章。
            this.initArticle();
        },
        methods: {
            initCatalogList() {
                request.get('/blog/catalog/').then(resp => {
                    if (resp.data.code === 200) {
                        for (let i = 0; i < resp.data.data.length; i++) {
                            this.catalogList.push(resp.data.data[i]);
                        }
                        this.$store.dispatch('actionSetCatalogListData', this.catalogList);
                        this.catalogList = this.$store.state.catalogListData;
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            //初始化当前的文章。
            initArticle(){
                request.get('/blog/article/'+this.currentArticleId).then(resp => {
                    if (resp.data.code === 200) {
                        this.article = resp.data.data;
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            /******upload 组件方法开始********/
            uploadSuccess(response, file, fileList) {
                console.log('恭喜您，上传成功');
                console.log(response.data);
                this.$message.success(response.msg);
                this.uploadSuccessFulUrl = response.data.url;
            },
            /******upload 组件方法结束********/

            postArticle() {
                //1.负责给tags赋值。
                this.article.tags='';
                for(let i=0;i<this.articleTags.length;){
                    this.article.tags += this.articleTags[i];
                    i++;
                    if(i<this.articleTags.length){
                        this.article.tags+=" ";
                    }
                }
                //2.负责给catalogName赋值。
                for(let i=0;i<this.catalogList.length;i++){
                    if(this.catalogList[i].id == this.article.catalog){
                        this.article.catalogName = this.catalogList[i].cname;
                        break;
                    }
                }

                //执行保存文章
                request.put('/blog/article/', this.article).then(resp => {
                    if (resp.data.code === 200) {
                        //Message.success('注册成功！');
                        this.$message.success('更新成功！')
                        //注册成功之后自动切换到登录的tab;
                        //setTimeout(this.changeTab('userlogin'), 2000);
                    }
                }).catch(err => {
                    console.log(err);
                });
            },

            change(value, render) {
                // render 为 markdown 解析后的结果
                this.article.content = render;
            }
        }
    }
</script>

<style scoped>

    .post-article-container {
        width: 100%;
        background-color: #fafafa;
    }

    .mavonEditor {
        width: 100%;
        height: 100%;
    }

    .markdown-body /deep/ ul li{
        list-style: disc;
    }

    .markdown-body /deep/ ol li{
        list-style: decimal;
    }
</style>